<template>
  <div style="width: 100%; padding: 5px">
    <el-card class="box-card" shadow="always" v-loading="loading">
      <template #header>
        <div class="card-header">
          <span>社团</span>
          <el-button class="button" text @click="handleQuery">
            <template #icon>
              <el-icon><Refresh /></el-icon>
            </template>
          </el-button>
        </div>
      </template>
      <div v-if="total !== 0">
        <el-table
          ref="dataTableRef"
          :data="communityList"
          highlight-current-row
          :stripe="true"
          size="large"
        >
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="100"
          />
          <el-table-column
            align="center"
            label="社团名称"
            prop="communityName"
          />
          <el-table-column
            align="center"
            label="社团社长"
            prop="communityPresident"
          />
          <el-table-column
            align="center"
            label="社团简介"
            prop="communityDetail"
          />
          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="280"
          >
            <template #default="scope">
              <el-button
                type="primary"
                text
                size="small"
                @click.stop="joinCommunity(scope.row.communityId)"
                >社团申请
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="handleQuery"
        />
      </div>
      <el-empty v-else description="暂无社团信息" />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { Refresh } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import { ICommunity, IPage } from "@/api/community/types";
import { getPageCommunityAPI } from "@/api/community";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  addCommunityMemberAPI,
  deleteCommunityMemberAPI,
  getFormCommunityMemberAPI,
} from "@/api/communityMember";
import { ICommunityMember } from "@/api/communityMember/types";

const loading = ref(false);
const communityList = ref<ICommunity[] | null>([]);
const total = ref<number>(0);
const queryParams = reactive<IPage>({
  pageNum: 1,
  pageSize: 5,
  student: true,
});
onMounted(() => {
  handleQuery();
});
// 获取社团列表
function handleQuery() {
  loading.value = true;
  getPageCommunityAPI(queryParams)
    .then(({ data }) => {
      communityList.value = data.list;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

const joinCommunity = (communityId) => {
  let community = null as ICommunityMember;
  getFormCommunityMemberAPI(communityId)
    .then((res) => {
      community = res.data;
    })
    .finally(() => {
      let message = "";
      let status = false;
      let flag = false;
      let type = "Confirm";
      if (community) {
        if (community.status === 0) {
          ElMessageBox.confirm("您已发起申请,请等待管理员审核！");
        }
        if (community.status === 1) {
          flag = true;
          message = "确认退出当前社团吗？";
          status = false;
          type = "Warning";
        }
        if (community.status === 2) {
          ElMessageBox.confirm("您的社团申请已被拒绝！");
        }
      } else {
        flag = true;
        message = "确认加入当前社团吗?";
        status = true;
      }
      if (flag) {
        ElMessageBox.confirm(message, type, {
          confirmButtonText: "发起申请",
          cancelButtonText: "取消申请",
          center: true,
        })
          .then(() => {
            if (status) {
              addCommunityMemberAPI({ communityId: communityId, status: 0 });
            } else {
              deleteCommunityMemberAPI(community.communityUserId);
            }
            ElMessage({
              type: "success",
              message: "申请成功!",
            });
          })
          .catch(() => {
            ElMessage({
              type: "info",
              message: "已取消!",
            });
          });
      }
    });
};
</script>

<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
}
</style>
